<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="sidebar.css" />
		<style>
			div{
				width:300px;
				height:300px;
			}
			div.taiyi{
				background:url(1.png);
				background-size:100% 100%;
				position:absolute;
				/* 堆叠属性：必须存在相对或者绝对定位情况下，z-indexx堆叠属性：属性值：9999内 */
				z-index: 999;
			}
			div.shengongbao{
				background:url(4.png);
				background-size: 100% 100%;
				position:absolute;
				z-index:1000;
			}
		</style>
	</head>
	<body>
		<!-- 左栏：左栏弹窗功能 
		语义化元素---div功能一致{有宽没高区域}
		div起名---不利于SEO优化
		涵盖名称---有利于SEO优化
		建议：搭建页面结构，固定功能：左栏 主区域，导航栏。。。
		      使用语义化元素
			  artical元素：独立的内容区域块，存：新闻，博客区域，左栏弹出的功能栏！
		-->
		<article>
			<ul class="sidebar">
				<!-- 左栏弹出框： 找到无序列表第一个li上，div起名outer-->
				<div class="outer"></div>
				<li>lorem1  <span>></span></li>
				<li>lorem2  <span>></span></li>
				<li>lorem3  <span>></span></li>
				<li>lorem4  <span>></span></li>
				<li>lorem5  <span>></span></li>
				<li>lorem6  <span>></span></li>
				<li>lorem7  <span>></span></li>
				<li>lorem8  <span>></span></li>
				<li>lorem9  <span>></span></li>
				<li>lorem10 <span>></span></li>
			</ul>
		</article>
		
		
		
		
		
		
		
		
		<!-- 相对定位与绝对定位，页面弹出功能
		 相对定位：position：relative,使用率高：相对于父级元素定位，元素存在于文档流中
		 绝对定位：position：absolute，使用率较高：存在父级，按照父级定位，没有父级按照网页
		          左上角位置进行定位，文档脱离文档流
			堆叠问题：z-index属性：属性值，属性值越大，越靠前
			根据相对定位与绝对定位特点，实现左栏功能
			左栏区使用相对定位：左栏区域基本不会移动{理解：钩点位}
			左栏弹出使用绝对定位：左栏弹出区域频繁切换{理解：钩子}
		 -->
		 <d iv class="taiyi"></div>
		 <d iv class="shengongbao"></div>
	</body>
</html>